<template>

    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品入库
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="bar_code" size="large" v-focus  id="bar-code-input" placeholder="请输入条形码" @keyup.enter.native="payCode" class="handle-input mr10"></el-input>
                <el-button type="primary" size="large" style="width: 15%" @click="saveStock">入 库</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column prop="name" label="商品名"></el-table-column>
                <el-table-column prop="uniq_attr" label="规格"></el-table-column>
                <el-table-column prop="in_price" label="价格"></el-table-column>
                <el-table-column prop="bar_code" label="条形码"></el-table-column>
                <el-table-column label="数量">
                    <template slot-scope="scope">
                        <el-input-number size="small" v-model="scope.row.num"></el-input-number>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'goods',
    data() {
        return {
            bar_code: '',
            tableData: [],
        };
    },
    activated: function () {
        document.getElementById("bar-code-input").focus();
    },
    directives: {
        focus:function (el) {
            el.querySelector("input").focus();
        }
    },
    methods: {
        saveStock () {
            let postArr = []
            for (let  i = 0; i < this.tableData.length; i++) {
                let _ = {}
                //统一换成string格式传过去
                _.sku_id = this.tableData[i].id + ''
                _.cat_id = this.tableData[i].cat_id + ''
                _.num = this.tableData[i].num + ''
                _.price = this.tableData[i].in_price + ''
                postArr.push(_)
            }
            this.http.addStock({data: JSON.stringify(postArr)}).then(res => {
                this.$message.success("新增库存成功")
                this.tableData = []
            })
        },
        payCode() {
            this.http.getSku(this.bar_code).then(res => {
                if(res.data.bar_code === undefined) {
                    this.$message.error("商品条形码不存在,请先录入该条形码")
                    this.bar_code = ''
                    return false
                }
                for (let i =0; i < this.tableData.length; i++ ) {
                    if(this.tableData[i].bar_code === res.data.bar_code) {
                        this.tableData[i].num += 1
                        this.bar_code = ''
                        return true
                    }
                }
                res.data.num = 1
                this.tableData.unshift(res.data)
                this.bar_code = ''
                return true
            })
        },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-input {
    width: 70%;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
